<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //删除tr的响应函数
        function delA() {
            //点击超链接后，需要删除超链接所在的那行
            var tr = this.parentNode.parentNode;

            // var name=tr.getElementsByTagName("td")[0].innerHTML;
            var name = tr.children[0].innerHTML;
            console.log(name);

            //删除之前弹出一个提示框
            /*
                confirm()用于弹出一个带有确定和取消按钮的提示框
                需要一个字符串作为参数，该字符串将会作为提示文字显示出来
                点击确认返回true 取消返回false
            */
            var flag = confirm("确定删除" + name + "吗？");
            if (flag) {
                tr.parentNode.removeChild(tr);
            }
            /*
                点击超链接后，超链接会跳转页面，这个是超链接的默认行为
                但是我们不希望出现默认行为 我们可以通过在响应函数的最后return  false来取消默认行为
            */
            return false;

        }
        window.onload = function () {
            var allA = document.getElementsByTagName("a");
            //为每个超链接都绑定一个单机响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = delA;
                /*
                    for循环会在页面加载完成之后立即执行，
                    而响应函数会在超链接被点击时才执行
                    当响应函数执行时for循环早已执行完毕
                */
            }
            /*
                添加员工的功能
                    -点击按钮后，将员工的信息添加到表格中
            */
            //为提交按钮设置一个单机函数
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function () {
                //获取用户填写的信息
                var name = document.getElementById("empName").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;

                //创建一个tr
                var tr = document.createElement("tr");
                tr.innerHTML="<td>"+name+"</td>"+
                             "<td>"+email+"</td>"+
                             "<td>"+salary+"</td>"+
                             "<td><a href='javascript:;'>Delete</a></td>";
                var a=tr.getElementsByTagName("a")[0];
                a.onclick=delA;

                //获取table
                var employeeTable = document.getElementById("employeeTable");
                //获取employeeTable中的tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                //将tr添加到table中
                tbody.appendChild(tr);
                // tbody.innerHTML+="<td>"+name+"</td>"+
                //              "<td>"+email+"</td>"+
                //              "<td>"+salary+"</td>"+
                //              "<td><a href='javascript:;'>Delete</a></td>";

            };
        }

    </script>
    <style>
        body {
            margin-top: 100px;
            margin-left: 40%;
        }

        table tr th,
        table tr td,
        table tr,
        div table {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button id="addEmpButton" value="abc">
                        submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>